<template>
  <div>
    <h3>全部客户</h3>
    <el-row>&nbsp;</el-row>
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <!--     放搜索条件   
          :inline="true"  变成行内表单
          -->
          <el-form :inline="true">
            <el-form-item label="客户等级">
              <el-select v-model="param.customLevelId" placeholder="客户等级" @change="customLevel">
                <el-option
                  v-for="cl in customLevelList"
                  :key="cl.id"
                  :label="cl.customLevelName"
                  :value="cl.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="累计订单金额">
              <el-input style="width: 150px;" v-model="param.content1" placeholder="最低金额"></el-input>~
              <el-input style="width: 150px;" v-model="param.content12" placeholder="最高金额"></el-input>
            </el-form-item>
            <!-- <el-form-item label="累计订单数量">
              <el-input style="width: 150px;" v-model="param.content2" placeholder="最低数量"></el-input>~
              <el-input style="width: 150px;" v-model="param.content22" placeholder="最高数量"></el-input>
            </el-form-item>-->
            <el-form-item label="注册日期">
              <el-date-picker
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="param.queryDate1"
              ></el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="最近消费日期">
              <el-date-picker
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="param.queryDate2"
              ></el-date-picker>
            </el-form-item>-->
            <el-form-item label="关键词：">
              <el-input style="width: 180px;" v-model="param.content" placeholder="客户昵称/手机号码/姓名"></el-input>
            </el-form-item>
            <br />
            <el-form-item>
              <el-button type="primary" @click="queryCustom">查询</el-button>
              <el-button @click="clean">清空</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <br />

    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-form>
            <el-form-item style="width: 230px;float:right">
              <el-button type="primary" @click="addCustom1">添加客户</el-button>
              <el-button @click="laHei">拉黑客户</el-button>
              <!-- <el-button @click="addPoint">赠送积分</el-button> -->
              <!-- <el-button @click="setLevel">设置等级</el-button> -->
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="55"></el-table-column>
            <el-table-column prop="customName" label="昵称"></el-table-column>
            <el-table-column prop="customPhone" label="注册手机号"></el-table-column>
            <el-table-column prop="customContactPhone" label="联系电话"></el-table-column>
            <el-table-column prop="customLevelId" label="客户等级"></el-table-column>
            <!-- <el-table-column prop="zyUser.userConsumeAmount" label="总消费金额"></el-table-column> -->
            <el-table-column prop="customPoint" label="客户积分"></el-table-column>
            <el-table-column prop="customCreateTime" label="注册时间"></el-table-column>
            <!-- <el-table-column prop="status" label="状态">
            <template slot-scope="scope">-->
            <!-- 插值表达式 -->
            <!-- {{ showStatus(scope.row.status) }}
              </template>
            </el-table-column>-->
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <a @click="queryCustomDetail(scope.row)" style="color:dodgerblue;">详情</a>&nbsp;|
                <a @click="laHeiOne(scope.row)" style="color:dodgerblue;">拉黑</a>&nbsp;|
                <a @click="lianxi(scope.row)" style="color:dodgerblue;">联系</a>&nbsp;
              </template>
            </el-table-column>

            <!-- <el-table-column label="操作">
              <a @click="queryCustomDetail(val)">查看详情</a>
             |&nbsp;<a @click="laHeiOne(val)">拉黑</a>
             |&nbsp;<a @click="lianxi(val)">联系</a>
            </el-table-column>-->
            <!-- 666666666666666 -->
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            :page-sizes="[10, 20, 50]"
            :page-size="10"
            layout="total,sizes,prev, pager, next"
            :total="total"
            @next-click="nextPage"
            @prev-click="precPage"
            @size-change="changePage"
            @current-change="changePageNum"
          ></el-pagination>
        </el-col>
      </el-row>

      <el-dialog style="width: 1700px;" title="客户详情" :visible.sync="dialogQueryCustomDetail">
        <el-form>
          <!-- style="margin-left: 150px;" -->
          客户名称：{{customDetail.custom.customName}}
          <br />
          受理电话：{{customDetail.custom.customPhone}}
          <br />
          客户积分：{{customDetail.custom.customPoint}}
          <br />
          联系人： {{customDetail.custom.customContactPerson}}
          <br />
          联系人电话：{{customDetail.custom.customContactPhone}}
          <br />-----用户-----
          <br />
          用户编号：{{customDetail.user.id}}
          <br />
          用户账户名称：{{customDetail.user.userAccount}}
          <br />
          用户总消费：{{customDetail.user.userConsumeAmount}}
          <br />
          用户账户余额：{{customDetail.user.userPurse}}
          <br />
          用户电话：{{customDetail.user.userPhone}}
          <br />-----公司信息-----
          <br />
          名下公司/集团个数：{{customDetail.company.length}}
          <br />
          <el-table
            :data="customDetail.company"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="id" label="集团id"></el-table-column>
            <el-table-column prop="companyCode" label="集团编码"></el-table-column>
            <el-table-column prop="companyAddr1" label="集团所属地市"></el-table-column>
            <el-table-column prop="companyAddr2" label="集团所属县市"></el-table-column>
            <el-table-column prop="companyManageName" label="客户经理名称"></el-table-column>
            <el-table-column prop="companyManagePhone" label="客户经理电话"></el-table-column>
            <el-table-column prop="companyManageCode" label="客户经理工号"></el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeCustonDetail()">关闭窗口</el-button>
        </div>
      </el-dialog>
      <!-- 第二个模态框：添加客户 -->
      <el-dialog title="新增客户" :visible.sync="dialogForAddCustom">
      <el-form style="margin-left: 200px;">


        <el-form-item label="用户" label-width="70px" >
          <el-select v-model="custom.userId" placeholder="关联用户">
                <el-option
                  v-for="user in userList"
                  :key="user.id"
                  :label="user.userName"
                  :value="user.id"
                ></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="客户名称" label-width="70px" >
          <el-input autocomplete="off" v-model="custom.customName"></el-input>
        </el-form-item>
        <el-form-item label="受理电话" label-width="70px" >
          <el-input autocomplete="off" v-model="custom.customPhone"></el-input>
        </el-form-item>
        <el-form-item label="联系人" label-width="70px" >
          <el-input autocomplete="off" v-model="custom.customContactPerson"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" label-width="70px" >
          <el-input autocomplete="off" v-model="custom.customContactPhone"></el-input>
        </el-form-item>

    
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao()">取 消</el-button>
        <el-button type="primary" @click="addCustom()">确 定</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      custom:{},
      customDetail: {
        custom: { customName: "" },
        company: { length: "" },
        user: {}
      },
      userList:[],
      dialogForAddCustom:false,
      dialogQueryCustomDetail: false,
      selectionData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      customLevelList: [],
      tableData: [],
      param: { customLevelId: "" }
    };
  },
  methods: {
    closeCustonDetail() {
      this.dialogQueryCustomDetail = false;
      this.customDetail={
        custom: { customName: "" },
        company: { length: "" },
        user: {}
      }
    },
    customLevel() {
      this.queryCustom();
    },
    laHeiOne(val) {
      let ids = [];
      ids.push(val.id);
      this.$axios.post("api/custom-server/custom/laHei", ids).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "拉黑成功",
            type: "success"
          });
        }
      });
      this.queryCustom();
    },
    lianxi(val) {
      alert("请拨打联系电话：  " + val.customContactPhone);
    },
    queryCustomDetail(val) {
      this.dialogQueryCustomDetail = true;
      this.$axios
        .post("api/custom-server/custom/queryCustomDetail", val.id)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            console.log(res.data);
            this.customDetail = res.data.data;
          }
        });
    },
    queryAllUser(){
      this.$axios
        .post("api/custom-server/custom/queryAllUser")
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.userList = res.data.data;
          }
        });
    },
    quxiao(){},
    addCustom1(){
      this.dialogForAddCustom=true;
    },
    addCustom() {
      this.dialogForAddCustom=false;
      this.$axios.post("api/custom-server/custom/addCustom",this.custom).then(res=>{
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
        }
      })
      this.queryCustom();
    },
    laHei() {
      let ids = [];
      this.selectionData.forEach(e => {
        ids.push(e.id);
      });
      this.$axios.post("api/custom-server/custom/laHei", ids).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "拉黑成功",
            type: "success"
          });
        }
      });
      this.queryCustom();
    },
    queryOrderccc() {
      this.pageNum = 1;
      this.queryOrder();
    },
    queryCustom() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.param;
      this.$axios
        .post("api/custom-server/custom/queryAllCustom", params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.pages = res.data.data.pages;
          }
        });
    },
    queryCustomLevel() {
      this.$axios
        .post("api/custom-server/custom/queryCustomLevel")
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.customLevelList = res.data.data;
          }
        });
    },
    clean() {
      this.param = { queryDate1: null };
      this.queryCustom();
      // queryDate1
    },
    handleSelectionChange(val) {
      this.selectionData = val;
      // alert(val);
    },

    nextPage(val) {
      this.pageNum = val;
      this.queryCustom();
    },
    precPage(val) {
      this.pageNum = val;
      this.queryCustom();
    },
    changePage(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.queryCustom();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.queryCustom();
    },
  },
  created() {
    this.queryAllUser();
    this.queryCustom();
    this.queryCustomLevel();
  }
};
</script>
  
  <style scoped>
</style>